<template>
  <div class="app-container">
    <router-link :to="{ path: '/article/list' }">
      <el-button>返回</el-button>
    </router-link>
    <el-button type="primary" class="save-button" @click="addArticle">保存</el-button>
    <br>
    <el-form label-position="right" label-width="60px" style="margin-top: 10px;">
      <el-form-item label="标题:">
        <el-input
          v-model="title"
          placeholder="标题"
        />
      </el-form-item>
    </el-form>
    <Editormd ref="articleContent" :content="content" />
  </div>
</template>

<script>
import Editormd from '@/layout/components/Editormd'
import request from '@/utils/request'

export default {
  name: 'Add',
  components: {
    Editormd
  },
  data() {
    return {
      title: '',
      content: '',
      date: ''
    }
  },
  mounted() {
    this.open()
  },
  beforeCreate() {
  },
  methods: {
    dateFormat(date) {
      var yy = new Date().getFullYear()
      var MM = new Date().getMonth() + 1
      if (MM < 10) {
        MM = '0' + MM
      }
      var dd = new Date().getDate()
      if (dd < 10) {
        dd = '0' + dd
      }
      const hh = new Date().getHours()
      const mm = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
      const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
      return yy + '-' + MM + '-' + dd + ' ' + hh + ':' + mm + ':' + ss
    },
    open() {
      this.$notify({
        title: '提示',
        dangerouslyUseHTMLString: true,
        message: '<h3>请在写文章前开头加入如下内容</h3><div style="color: blue">' +
          '---<br>' +
          'title: 文章标题<br>' +
          'date: ' + this.dateFormat(new Date()) + '<br>' +
          'tags:<br>' +
          '- 标签1<br>' +
          '- 标签2<br>' +
          'categories: 分类名称<br>' +
          'comments: true<br>' +
          'top: false<br>' +
          'summary: 文章描述<br>' +
          'author: 兴趣使然の草帽路飞<br>' +
          '---' +
          ' <br>' +
          ' <br>' +
          '文章内容</div>',
        duration: 0
      })
    },
    addArticle() {
      request({
        url: '/article/add',
        method: 'post',
        data: {
          title: this.title,
          content: this.$refs.articleContent.$refs.content.innerText
        }
      }).then(response => {
        this.$message({
          message: '保存成功！',
          type: 'success',
          duration: 3 * 1000,
          showClose: true
        })
        this.$router.push('/article/list')
      })
    }
  }
}
</script>

<style scoped>

</style>
